import { PureComponent } from 'react'
import { Modal, Collapse, Input, Button } from 'antd'
import styles from './codeListModal.less'
const { Panel } = Collapse
class CodeModal extends PureComponent {
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const {onOk } = this.props
        onOk()
    }
    render(){
        const { visible } = this.props
        const text = `
        A dog is a type of domesticated animal.
        Known for its loyalty and faithfulness,
        it can be found as a welcome guest in many households across the world.
        `
        return(
            <Modal
                title="申请开票"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={650}
            >
                <Collapse accordion>
                    <Panel header="发票抬头" key="1">
                    <div className={styles.codeModalSearch}>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>会员账号：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>发票抬头：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                    </div>
                    <div className={styles.codeModalSearch}>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>税号：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>营业执照地址：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                    </div>
                    <div className={styles.codeModalSearch}>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>营业执照电话：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>开户银行：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                    </div>
                    <div className={styles.codeModalSearch}>
                        <div className={styles.codeModalSin}>
                            <span className={styles.codeModalSpan}>开户行账号：</span>
                            <Input className={styles.codeModalInput}/>
                        </div>
                        <div className={styles.codeModalSin}>
                            <Button type="primary" icon="plus" onClick={this.handleChooseHeader}>快速选择抬头</Button>
                            <Button type="primary" icon="plus" style={{marginLeft: '14px'}}>快速新建抬头</Button>

                        </div>
                    </div>
                    </Panel>
                    <Panel header="发票类型" key="2">
                    <p>{text}</p>
                    </Panel>
                    <Panel header="添加运单" key="3">
                    <p>{text}</p>
                    </Panel>
                </Collapse>
            </Modal>
        )
    }
}
export  default CodeModal